<template>
    <div>
        <span class='title'>用户管理</span>
        <div class='card'>
            <el-card :style="{ height: '1150px' }">
                <div>
                    <el-input v-model='input' placeholder='请输入姓名或者ID' style='width: 200px;height: 100px'></el-input>
                    <el-select v-model='value' placeholder='请选择用户类型' style='width: 200px;height: 80px'>
                        <el-option v-for='item in options' :key='item.value' :label='item.label' :value='item.value'></el-option>
                    </el-select>
                    <span class='button-container'>
                        <el-button type='primary1'><i class="el-icon-search"></i> 查询</el-button>
                        <el-button type='primary2'><i class="el-icon-refresh"></i> 重置</el-button>
                        <el-button type='primary' class='new-user-button' @click='openNewUserDialog'><i class="el-icon-plus"></i> 新建用户</el-button>
                    </span>
                </div>
                <div>
                    <el-row :gutter='20'>
                        <el-col :span='8' v-for='user in paginatedUsers' :key='user.uid'>
                            <el-card>
                                <div class='user-info'>
                                    <p><el-icon class="icon-blue" name="user-solid"></el-icon> <strong>姓名:</strong> {{ user.name }}</p>
                                    <p><el-icon class="icon-blue" name="document"></el-icon> <strong>ID:</strong> {{ user.id }}</p>
                                    <p>
                                        <el-icon class="icon-blue" name="star-on"></el-icon> <strong>用户类型:</strong>
                                        <span class='user-type' :class="'type-' + user.type.toLowerCase()">{{ user.type }}</span>
                                    </p>
                                </div>
                                <div class='card-actions'>
                                    <el-button class='edit-button' @click='openEditDialog(user)'><i class="el-icon-edit"></i> 编辑</el-button>
                                    <el-button class='delete-button' @click='confirmDelete(user)'><i class="el-icon-delete"></i> 删除</el-button>
                                </div>
                            </el-card>
                        </el-col>
                    </el-row>
                    <div class='pagination-container'>
                        <el-pagination
                                background
                                layout='sizes, prev, pager, next, jumper'
                                :total='users.length'
                                :page-size='pageSize'
                                :page-sizes="[3, 6, 9]"
                                :current-page='currentPage'
                                @current-change='handlePageChange'
                                @size-change='handleSizeChange'
                        ></el-pagination>
                    </div>

                    <!-- 新建用户弹窗 -->
                    <el-dialog :visible.sync='newUserDialogVisible' title='新建用户'>
                        <el-form :model='newUser'>
                            <el-form-item label='姓名'>
                                <el-input v-model='newUser.name'></el-input>
                            </el-form-item>
                            <el-form-item label='用户类型'>
                                <el-select v-model='newUser.type' placeholder='请选择用户类型'>
                                    <el-option v-for='item in options' :key='item.value' :label='item.label' :value='item.label'></el-option>
                                </el-select>
                            </el-form-item>
                        </el-form>
                        <div slot='footer' class='dialog-footer'>
                            <el-button @click='newUserDialogVisible = false'>取消</el-button>
                            <el-button type='primary' @click='addUser'>保存</el-button>
                        </div>
                    </el-dialog>

                    <!-- 显示新建用户信息的确认弹窗 -->
                    <el-dialog :visible.sync='showUserInfoDialog' title='确认新建用户信息'>
                        <p><strong>姓名:</strong> {{ newUser.name }}</p>
                        <p><strong>ID:</strong> {{ newUser.id }}</p>
                        <p><strong>用户类型:</strong> {{ newUser.type }}</p>
                        <div slot='footer' class='dialog-footer'>
                            <el-button @click='showUserInfoDialog = false'>确认</el-button>
                        </div>
                    </el-dialog>

                    <!-- 编辑用户弹窗 -->
                    <el-dialog :visible.sync='editDialogVisible' title='编辑用户信息'>
                        <el-form :model='currentUser'>
                            <el-form-item label='姓名'>
                                <el-input v-model='currentUser.name'></el-input>
                            </el-form-item>
                            <el-form-item label='用户类型'>
                                <el-input v-model='currentUser.type'></el-input>
                            </el-form-item>
                        </el-form>
                        <div slot='footer' class='dialog-footer'>
                            <el-button @click='editDialogVisible = false'>取消</el-button>
                            <el-button type='primary' @click='saveUser'>保存</el-button>
                        </div>
                    </el-dialog>
                </div>
            </el-card>
        </div>
    </div>
</template>

<script>
import {getAllAdm} from '../../../../api/api'

export default {
  data () {
    return {
      input: '',
      options: [
        { value: '选项1', label: '辅导员' },
        { value: '选项2', label: '院系管理员' },
        { value: '选项3', label: '超级管理员' }
      ],
      value: '',
      users: [],
      currentPage: 1,
      pageSize: 9,
      editDialogVisible: false,
      currentUser: {},
      newUserDialogVisible: false,
      newUser: {
        name: '',
        uid: '',
        type: ''
      },
      showUserInfoDialog: false // 控制显示新建用户信息的确认弹窗
    }
  },
  computed: {
    paginatedUsers () {
      const start = (this.currentPage - 1) * this.pageSize
      const end = start + this.pageSize
      return this.users.slice(start, end)
    }
  },
  created () {
    this.fetchData()
  },
  methods: {
    fetchData () {
      getAllAdm().then(res => {
        if (res.status && res.data) {
          this.users = res.data.map(item => ({
            name: item.loginName, // 映射后端返回的字段
            uid: item.id,
            type: this.mapPermissionLevel(item.permissionLevel) // 映射后端返回的字段
          }))
        } else {
          console.error('获取数据失败:', res.message)
        }
      }).catch(error => {
        console.error('获取数据错误:', error)
      })
    },
    mapPermissionLevel (level) {
      // 根据后端返回的权限级别映射到对应的用户类型
      switch (level) {
        case 1:
          return '超级管理员'
        case 2:
          return '院系辅导员'
        case 3:
          return '辅导员'
        default:
          return '未知类型'
      }
    },
    handlePageChange (page) {
      this.currentPage = page
    },
    handleSizeChange (size) {
      this.pageSize = size
    },
    openEditDialog (user) {
      // 使用深拷贝避免直接修改原始数据
      this.currentUser = { ...user }
      this.editDialogVisible = true
    },
    saveUser () {
      // 查找当前用户在数组中的索引
      const index = this.users.findIndex(u => u.id === this.currentUser.id)
      if (index !== -1) {
        // 使用 Vue.set 方法更新数组中的对象
        this.$set(this.users, index, { ...this.currentUser })
      }
      this.editDialogVisible = false
    },
    confirmDelete (user) {
      this.$confirm(`你确定要删除用户 ${user.name} 吗?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          this.deleteUser(user)
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },
    deleteUser (user) {
      const index = this.users.findIndex(u => u.id === user.id)
      if (index !== -1) {
        this.users.splice(index, 1)
      }
      this.$message({
        type: 'success',
        message: '删除成功'
      })
    },
    openNewUserDialog () {
      // 打开新建用户弹窗时清空输入框内容
      this.newUserDialogVisible = true
      this.newUser = {
        name: '',
        uid: '',
        type: ''
      }
    },
    addUser () {
      // 添加用户时自动生成新的 ID
      this.users.push({
        name: this.newUser.name,
        uid: this.newUser.uid,
        type: this.newUser.type
      })
      this.newUserDialogVisible = false

      // 显示新建用户信息的确认弹窗
      this.showUserInfoDialog = true
    }
  }
}
</script>

<style scoped>
.title {
    width: 250px;
    height: 28px;
    opacity: 1;
    color: #000000e6;
    text-align: left;
    font-size: 20px;
    font-weight: 500;
    line-height: 28px;
    padding: 20px;
    display: block;
}

.card {
    margin-left: 20px;
    margin-right: 20px;
}

.el-button--primary1 {
    background-color: #166aff;
    border-color: #166aff;
    color: white;
}

.el-button--primary2 {
    background-color: white;
    border-color: #166aff;
    color: #166aff;
}

.button-container {
    margin-left: 50px;
}

.user-info {
    padding: 20px;
}

.card-actions {
    display: flex;
    justify-content: space-between;
    margin-top: 10px;
}

.card-actions .el-button {
    flex: 1;
    margin: 0 5px;
}

.edit-button {
    background-color: #166aff;
    border-color: #166aff;
    color: white;
}

.delete-button {
    background-color: white;
    border-color: #166aff;
    color: #166aff;
}

.pagination-container {
    display: flex;
    justify-content: center;
    margin-top: 20px;
}

.el-pagination .el-pager .active {
    background-color: #409eff;
    color: white;
}

.el-pagination .el-pager li:hover {
    background-color: #409eff;
    color: white;
}

.dialog-footer {
    text-align: right;
}

.user-type {
    display: inline-block;
    padding: 4px 8px;
    border-radius: 5px;
    border: 2px solid;
    font-weight: bold;
    text-align: center;
    margin-top: 5px;
}

.type-学校用户 {
    border-color: #409eff;
    background-color: #e6f7ff; /* 背景色 */
}

.type-辅导员 {
    border-color: #67c23a;
    background-color: #f0f9eb; /* 背景色 */
}

.type-院系辅导员 {
    border-color: #e6a23c;
    background-color: #fffbe6; /* 背景色 */
}

.type-院系管理员 {
    border-color: #00fba3;
    background-color: #fffbe6; /* 背景色 */
}

.type-超级管理员 {
    border-color: #f56c6c;
    background-color: #ffe2e2; /* 背景色 */
}

.icon-blue {
    color: #166aff;
}

.new-user-button {
    background-color: #166aff;
    border-color: #166aff;
    color: white;
}
</style>
